<!DOCTYPE HTML>
<html>
<head>
    <!-- support for mobile touch devices -->
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

    <!-- twitter bootstrap CSS stylesheet - not required by cornerstoneTools -->
    <!-- <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="../bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>
            unselectableOverlay/index.html
        </h1>
        <p>
            This example demonstrates using HTML to make overlays on top of the image.
            It also makes them unselectable using a Cornerstone Tools helper function.
        </p>
        <a href="../index.html">Go back to the Examples page</a>
    </div>

    <div class="row">
        <div class="col-xs-6">
            <div style="width:512px;height:512px;position:relative;display:inline-block;color:white;"
                 class='cornerstone-enabled-image'>

                <div id="dicomImage"
                    style="width:512px;height:512px;top:0px;left:0px; position:absolute;">
                </div>

                <div id="topleft" class="overlay" style="position: absolute;top:0px; left:0px">
                    Patient Name
                </div>
                <div id="topright" class="overlay" style="position: absolute;top:0px; right:0px">
                    Hospital
                </div>
                <div id="bottomright" class="overlay" style="position: absolute;bottom:0px; right:0px">
                    Zoom:
                </div>
                <div id="bottomleft" class="overlay" style="position: absolute;bottom:0px; left:0px">
                    WW/WC:
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!-- include the cornerstone library -->
<script src="../cornerstone.min.js"></script>
<script src="../cornerstoneMath.min.js"></script>

<!-- include the cornerstone tools library -->
<script src="../../dist/cornerstoneTools.js"></script>
<script>window.cornerstoneTools || document.write('<script src="https://unpkg.com/cornerstone-tools">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageLoader.js"></script>

<script>
    // image enable the element
    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);

    // load the image and display it
    const imageId = 'example://1';
    cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);

        // enable mouse input
        cornerstoneTools.mouseInput.enable(element);

        // enable zooming and windowing
        cornerstoneTools.wwwc.activate(element, 1);
        cornerstoneTools.zoom.activate(element, 4);

        // make image div itself unselectable (but let pointer events through)
        cornerstoneTools.makeUnselectable(element);

        // make overlay elements unselectalbe and ignore pointer events
        const overlays = document.getElementsByClassName('overlay');
        for (overlay of overlays) {
            cornerstoneTools.makeUnselectable(overlay, true);
        }

        // update the overlay status
        element.addEventListener('cornerstoneimagerendered', function(e) {
            const viewport = e.detail.viewport;
            const wwwc = Math.round(viewport.voi.windowWidth) + '/' + Math.round(viewport.voi.windowCenter);
            const zoom = viewport.scale + 'x';
            document.getElementById('bottomleft').textContent = 'WW/WC: ' + wwwc;
            document.getElementById('bottomright').textContent = 'Zoom: ' + zoom;
        });
    });

</script>
</html>
